import React, { Component } from 'react'
import { Table, ConfigProvider, Button, Switch } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'// zhCN下面赋值用 中文语言包；
import './doctorList.css'
import SearchDoctor from './search/searchDoctor'
import DoctorAdd from '../doctorAdd/doctorAdd'
// import axios from 'axios'
import PubSub from 'pubsub-js'
import {delDoctor} from '../../../redux/actions/addNewDoctor'
import {connect} from 'react-redux'         //引入连接connect



class doctorList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titles: ['主任', '副主任', '主治医师', '副主治医师', '实习医生'],
            offices: ['骨科', '内科', '外科', '妇科', '儿科', '脑科'],
            list: [],
            showList: [],
            locale: zhCN,
            isAll: false,
            page: 1,
            pageSize: 10,
            // defaultCurrent:1
        }
    }
    UNSAFE_componentWillMount() {
        console.log(this.props);
        const data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                key: i,
                name: `李鹏${i}`,
                tel: 13000000000 + parseInt(Math.random() * 1000000000),
                title: this.state.titles[parseInt(Math.random() * 5)],
                office: this.state.offices[parseInt(Math.random() * 6)],
                // condition:parseInt(Math.random()*2),
                condition: Boolean(parseInt(Math.random() * 2)),
                skilled: '',
                brief: ''
            });
        }
        this.setState({
            list: data,
            showList: data
        })
        console.log('准备开始axios请求...');
        // axios请求
        /* axios.post(`127.0.0.1:8001/api/getTeamContractListAll`)
            .then(
                response => { console.log('成功了', response.data); },
                error => { console.log('失败了', error); }
            )
            .catch(function (error) {
                console.log(error);
            }); */
    }
    componentDidMount() {
        PubSub.subscribe('addDoctor', (_, obj) => {
            console.log(this.reArr(this.state.list), this.state.list.length);
            const oldArr = this.reArr(this.state.list)
            console.log('配置obj.key前...');
            obj.key = (oldArr[oldArr.length - 1].key + 1)
            console.log('赋值新数组前...');
            oldArr.push(obj)
            console.log('setState前...', this.state, oldArr);
            this.setState({
                list: oldArr,
                showList: oldArr
            })
            setTimeout(() => {
                console.log(this.state.list);
            }, 100);
        })
    }
    // 定义一个返回新数组方法
    reArr = (a) => {
        return a.filter(item => item)
    }

    changePage = (page, pageSize) => {
        if (this.state.pageSize === pageSize) {
            this.setState({
                page: page,
                pageSize: pageSize
            })
        } else {
            this.setState({
                page: 1,
                pageSize: pageSize
            })
        }

        console.log(page, pageSize);

    }
    switchChange = (checked) => {
        console.log('改变状态:', checked);
    }

    setSearch = (setName, setOffice, setTitle) => {
        console.log(this.state.list);
        console.log('正在获取新数组...');
        console.log('doctorList收到的数据', setName, setOffice, setTitle);
        const newArr = this.state.list.filter((item) => {
            return (setName === '' || item.name.indexOf(setName) >= 0) && (setOffice === '' || item.office === setOffice) && (setTitle === '' || item.title === setTitle)
        })
        console.log(newArr);
        this.setState({
            showList: newArr
        })
    }
    delDoctor = (_, item) => {
        return () => {
            this.props.delDoctor(item.key)
            console.log(item);
        }


    }
    render() {
        // 定义表头
        const columns = [
            { title: '医生', dataIndex: 'name', width: "15%", align: "center" },
            { title: '电话', dataIndex: 'tel', width: "15%", align: "center" },
            { title: '职称', dataIndex: 'title', width: "15%", align: "center" },
            { title: '科室', dataIndex: 'office', width: "15%", align: "center" },
            { title: '状态', dataIndex: 'condition', width: "15%", align: "center", render: (item) => <div><Switch defaultChecked={item} onChange={this.switchChange} /></div> },
            { title: '操作', dataIndex: 'operate', align: "center", render: (_, item) => <div><Button type="primary">详情</Button> <Button type="primary" onClick={this.delDoctor(_, item)} danger>删除</Button></div>, },
        ];
        return (
            <ConfigProvider locale={zhCN}>
                <SearchDoctor setSearch={this.setSearch} />
                <Table columns={columns} dataSource={this.props.doctorInfo.list} scroll={{ y: 370 }}
                    // 分页器
                    pagination={{
                        // simple: true,
                        // current: this.state.current,
                        total: this.state.showList.length,
                        onChange: this.changePage,
                        current: this.state.page,
                        // showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`},
                        showSizeChanger: true,
                        showTotal: () => { return `共${this.state.showList.length}项`; },

                        pageSize: this.state.pageSize,
                        pageSizeOptions: [5, 10, 15, 20],
                        showTitle: true,
                        style: { display: "block" },
                    }} />
                {/* <DoctorAdd /> */}
            </ConfigProvider>
        )
    }
}
export default connect(
    state=>({doctorInfo:state}),      //映射状态
    {delDoctor}       //映射操作状态的方法
)(doctorList)


